<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 .para1 p{
            color:red;
        }
        div div #box3 p{
            color: blue;
        }
        div.para1 div.para2 div.para3 p{
            color: green;
        }
        div p {
            color: red;
        }

        #box {
            color: blue;
        }
        span{
            color: green;
        }
        .nav{
            color: red;
        }
        .nav ul li{
            color: blue;
        }
    </style>
</head>
<body>
    <!-- 显蓝色，因为只有blue才选中了 -->
    <div id="box1" class="para1">
        <div id="box2" class="para2">
            <div id="box3" class="para3">
                <p>中华人民共和国</p>
            </div>
        </div>
    </div>
    <!-- 显红色，因为只有red才选中了 -->
    <div id="box">
        <p id="para" class="spec">
            <span>
                中华人民共和国
            </span>
        </p>
    </div>
    <!-- 显绿色，因为就近原则 -->
    <div id="box">
    <div class="nav">
        <ul>
            <li>
                <span>中华人民共和国</span>
            </li>
            <li>
                <span>中华人民共和国</span>
            </li>
            <li>
                <span>中华人民共和国</span>
            </li>
            <li>
                <span>中华人民共和国</span>
            </li>
        </ul>
    </div>
    <!-- 显蓝色，因为蓝色权重更大 -->
    <div id="father" class="c1">
        <p id="son" class="c2">
          中华人民共和国
        </p>
      </div>
      <style type="text/css">
        #father #son{  
          color:blue;
        }
        
        #father p.c2{ 
          color:black;
        }
        
        div.c1 p.c2{ 
          color:red;
        } 
        
        #father{
          color:green!important;
        }
      </style>
      <!-- 显红色，因为盒子的继承 -->
      <style type="text/css">
        #father{ 
          color:red;
        }
        
        p{ 
          color:blue;
        }
      </style>
      <div id="father">
        <p>
          中华人民共和国
        </p>
      </div>
      <div id="box1" class="c1">
        <div id="box2" class="c2">
          <div id="box3" class="c3">
            中华人民共和国
          </div>
        </div>
      </div>
      <!-- 显黄色，因为相比较权重大且就近原则 -->
      <style type="text/css">
        .c1 .c2 div{ 
          color:blue;
        }
        div #box3{
          color:green;
        }
        #box1 div{
          color:yellow;
        }
      </style>
      
</body>
</html>